import React, { useRef } from 'react';
import classNames from 'classnames';
import { useFullscreen } from 'ahooks';
import { FullscreenOutlined, CloseOutlined } from '@ant-design/icons';
import styles from './index.less';

const Index = props => {
  const { className, fullscreenClassName, children, ...rest } = props;

  const ref = useRef();
  const [isFullscreen, { setFull, exitFull, toggleFull }] = useFullscreen(ref);

  return (
    <div
      {...rest}
      className={classNames(
        styles.main,
        className,
        isFullscreen && (fullscreenClassName || styles.fullscreen),
      )}
      ref={ref}
    >
      <a className={styles.link} onClick={toggleFull}>
        {isFullscreen ? <CloseOutlined /> : <FullscreenOutlined />}
      </a>

      {typeof children === 'function'
        ? children({ isFullscreen, setFull, exitFull, toggleFull })
        : children}
    </div>
  );
};

Index.displayName = 'Fullscreen';
export default Index;
